<template>
  <div>
    <el-carousel :interval="0" type="card" height="200px">
      <el-carousel-item v-for="(image, index) in images" :key="index">
        <router-link @click="notice(image.alt)" :to="image.to">
          <img class="carousel-image" :src="image.src" :alt="image.alt" />
        </router-link>
      </el-carousel-item>
    </el-carousel>

    <el-tabs type="border-card">
      <el-tab-pane label="基础数据概览">
        <template>
          <div ref="chartRef" style="width: 1200px; height: 500px;"></div>
        </template>
      </el-tab-pane>
      <el-tab-pane label="审核数据概览">
        <template>
          <div ref="nestedPieChart" style="width: 1200px; height: 500px;"></div>
        </template>
      </el-tab-pane>
      <el-tab-pane label="权限数据概览">
        <template>
          <div ref="pieChart" style="width: 1200px; height: 500px;"></div>
        </template>
      </el-tab-pane>
      <el-tab-pane label="人流量数据概览">
        <template>
            <div ref="lineChart" style="width: 1200px; height: 500px;"></div>
        </template>
      </el-tab-pane>
      <el-tab-pane label="查看日历">
        <el-calendar v-model="dateValue" style="width: 1200px; height: 500px; overflow: auto"></el-calendar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import http from "@/utils/http";

export default {
  name: "HomeView",
  components: {
  },
  mounted(){
      this.updateData();
  },
  computed: {
  },
  data() {
    return {
      data1: [],
      data2: [],
      data3: [],
      data4: [], // 周一到周日的人流量数据
      days: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],

      //日历
      dateValue: new Date(),

      images: [
        { src: require('@/assets/homeImage1.png'), alt: '业主信息管理页面', to: {name: 'owner_info'} },
        { src: require('@/assets/homeImage2.png'), alt: '房屋信息管理页面', to: {name: 'house_info'} },
        { src: require('@/assets/homeImage3.png'), alt: '车辆信息管理页面', to: {name: 'car_info'} },
        { src: require('@/assets/homeImage4.png'), alt: '停车场信息管理页面', to: {name: 'parking_info'} },
        { src: require('@/assets/homeImage5.png'), alt: '门禁使用记录管理页面', to: {name: 'access_records'} },
        { src: require('@/assets/homeImage6.png'), alt: '管理员管理页面', to: {name: 'manager'} },
      ],
    }
  },
  methods: {
    notice(alt) {
      console.log("成功进入notice");
      this.$notify({
        title: '成功',
        message: '成功进入' + alt,
        type: 'success'
      });
    },
    //更新图表数据
    updateData() {
      //拿到data1
      http.get("/admin/noRole/getCount")
          .then((response)=>{
            const Result = response.data;
            this.data1 = Result.data;
            console.log("data1", this.data1);
            for(let i in this.data1){
              this.data1[i]=parseInt(this.data1[i])
            }
            this.initChartRef();
          })
          .catch(function (error){
            //请求失败
            console.log("request error !");
            console.error(error);
          });
      //拿到data2
      http.get("/admin/noRole/getVerifyCount")
          .then((response)=>{
            const Result = response.data;
            this.data2 = Result.data;
            console.log("data2", this.data2);
            for(let i in this.data2){
              this.data2[i]=parseInt(this.data2[i])
            }
            this.initNestedPieChart();
          })
          .catch(function (error){
            //请求失败
            console.log("request error !");
            console.error(error);
          });
      //拿到data3
      http.get("/admin/noRole/getRoleCount")
          .then((response)=>{
            const Result = response.data;
            this.data3 = Result.data;
            console.log("data3", this.data3);
            for(let i in this.data3){
              this.data3[i]=parseInt(this.data3[i])
            }
            this.initPieChart();
          })
          .catch(function (error){
            //请求失败
            console.log("request error !");
            console.error(error);
          });
      //拿到data4
      http.get("/admin/noRole/getExitCount")
          .then((response)=>{
            const Result = response.data;
            this.data4 = Result.data;
            console.log("data4", this.data4);
            for(let i in this.data4){
              this.data4[i]=parseInt(this.data4[i])
            }
            this.initChart();
          })
          .catch(function (error){
            //请求失败
            console.log("request error !");
            console.error(error);
          });
    },
    //第一个柱状图
    initChartRef() {
      this.$nextTick(() => {
        const myChartRef = echarts.init(this.$refs.chartRef);
        const option = {
          xAxis: {
            type: 'category',  // 声明 x 轴类型为类目轴
            data: ['业主总数', '房屋总数', '车辆总数', '停车位总数', '门禁总数', '传感器总数', '管理员总数']  // x 轴类目数据
          },
          yAxis: {
            type: 'value'  // 声明 y 轴类型为数值轴
          },
          series: [
            {
              data: this.data1,  // 系列数据
              type: 'bar',  // 系列类型为柱状图
              name: '总数',  // 系列名称
              itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,  // 渐变色的方向
                    [
                      { offset: 0, color: '#b6ef99' },  // 顶部
                      { offset: 0.3, color: '#7af18a' },
                      { offset: 0.6, color: '#84ddfd' },
                      { offset: 0.9, color: '#54c7ee' },  // 底部
                    ]
                )
              }
            },
          ],
          tooltip: {
            show: true,       // 显示提示框
            trigger: 'item',  // 鼠标悬停到每个数据项时触发
            formatter: '{a} <br/>{b} : {c}', // 模板格式化，显示系列名、数据项名称、数值
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
        myChartRef.setOption(option);
      });
    },
    //第二个饼图
    initNestedPieChart() {
      this.$nextTick(() => {
        const myNestedPieChart = echarts.init(this.$refs.nestedPieChart);
        const nestedPieOption = {
          color: [
            // 分配颜色，确保每个审核类型有主颜色
            '#c23531', // 1-业主审核主颜色
            '#2f4554', // 2-房屋审核主颜色
            '#61a0a8', // 3-车辆审核主颜色
            '#d5194a', // 1-未审核
            '#e722be', // 1-已通过
            '#fa5c5c', // 1-已拒绝
            '#91c7ae',  // 2-未审核
            '#d48265', // 2-已通过
            '#f4e925', // 2-已拒绝
            '#66cc99', // 3-未审核
            '#4bb4e3', // 3-已通过
            '#33a6cc'  // 3-已拒绝
          ],
          legend: {
            orient: 'vertical',
            left: 'left',
            data: [
              '1-业主审核', '2-房屋审核', '3-车辆审核',
              '1-未审核', '1-已通过', '1-已拒绝',
              '2-未审核', '2-已通过', '2-已拒绝',
              '3-未审核', '3-已通过', '3-已拒绝',
            ]
          },
          series: [
            {
              name: '审核类型',
              type: 'pie',
              radius: ['40%', '55%'],
              data: [
                { value: this.data2[0], name: '1-业主审核', color: '#c23531' },
                { value: this.data2[1], name: '2-房屋审核', color: '#2f4554' },
                { value: this.data2[2], name: '3-车辆审核', color: '#61a0a8' },
              ],
              label: {
                show: true,
                position: 'inner', // 将标签放在扇区内部
                // alignTo: 'edge', // 标签对齐到边缘，避免重叠
                // distance: 10, // 标签与扇区边缘的距离
                // color: '#000', // 标签文字颜色
                fontSize: 14, // 标签文字大小
              }
            },
            {
              name: '状态总数',
              type: 'pie',
              radius: ['55%', '70%'],
              data: [
                // 外环数据，已根据内环颜色分配相近颜色
                { value: this.data2[3], name: '1-未审核', color: '#d5194a' },
                { value: this.data2[4], name: '1-已通过', color: '#e722be' },
                { value: this.data2[5], name: '1-已拒绝', color: '#fa5c5c' },
                { value: this.data2[6], name: '2-未审核', color: '#91c7ae' },
                { value: this.data2[7], name: '2-已通过', color: '#d48265' },
                { value: this.data2[8], name: '2-已拒绝', color: '#f4e925' },
                { value: this.data2[9], name: '3-未审核', color: '#66cc99' },
                { value: this.data2[10], name: '3-已通过', color: '#4bb4e3' },
                { value: this.data2[11], name: '3-已拒绝', color: '#33a6cc' }
              ],
              label: {
                show: true,
                position: 'outer'
              }
            }
          ],
          tooltip: {
            show: true,       // 显示提示框
            trigger: 'item',  // 鼠标悬停到每个数据项时触发
            formatter: '{a} <br/>{b} : {c} ({d}%)', // 模板格式化，显示系列名、数据项名称、数值和百分比
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
        myNestedPieChart.setOption(nestedPieOption);
      });
    },
    //第三个饼图（基础）
    initPieChart() {
      const myPieChart = echarts.init(this.$refs.pieChart);
      const pieChartOption = {
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            tooltip: {
              show: true,       // 显示提示框
              trigger: 'item',  // 鼠标悬停到每个数据项时触发
              formatter: '{a} <br/>{b} : {c} ({d}%)', // 模板格式化，显示系列名、数据项名称、数值和百分比
            },
            series: [
              {
                name: '权限类型',
                type: 'pie',
                radius: '50%',
                data: [
                  { value: this.data3[0], name: '1-业主信息管理' },
                  { value: this.data3[1], name: '2-房屋信息管理' },
                  { value: this.data3[2], name: '3-车辆信息管理' },
                  { value: this.data3[3], name: '4-车位信息管理' },
                  { value: this.data3[4], name: '5-门禁与传感器信息管理' }
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              },
            ]
          }
      myPieChart.setOption(pieChartOption);
    },

    //第四个折线图
    initChart() {
      const myChart = echarts.init(this.$refs.lineChart);
      const option = {
        tooltip: {
          trigger: 'axis',
          show: true,       // 显示提示框
        },
        legend: {
          data: ['人流量']
        },
        xAxis: {
          type: 'category',
          data: this.days
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '人流量',
          type: 'line',
          data: this.data4
        }]
      };
      myChart.setOption(option);
    }
  },
  beforeDestroy() {

  }
};
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.carousel-image {
  width: 100%;
  height: auto;
  display: block;
}

</style>
